
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe64b;</i>
                    <div class="name">ICON_close_default</div>
                    <div class="code">&amp;#xe64b;</div>
                    <div class="fontclass">.iconclosedefault</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69a;</i>
                    <div class="name">ICON_Set-up</div>
                    <div class="code">&amp;#xe69a;</div>
                    <div class="fontclass">.iconsetup</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe84b;</i>
                    <div class="name">平台管理</div>
                    <div class="code">&amp;#xe84b;</div>
                    <div class="fontclass">.pingtaiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe834;</i>
                    <div class="name">钻</div>
                    <div class="code">&amp;#xe834;</div>
                    <div class="fontclass">.zuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe641;</i>
                    <div class="name">-</div>
                    <div class="code">&amp;#xe641;</div>
                    <div class="fontclass">.anonymous-iconfont</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e8;</i>
                    <div class="name">最小化</div>
                    <div class="code">&amp;#xe6e8;</div>
                    <div class="fontclass">.zuixiaohua</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6da;</i>
                    <div class="name">收起</div>
                    <div class="code">&amp;#xe6da;</div>
                    <div class="fontclass">.shouqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">可拖拽</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.ketuozhuai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62c;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xe62c;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6dd;</i>
                    <div class="name">展开</div>
                    <div class="code">&amp;#xe6dd;</div>
                    <div class="fontclass">.zhankai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f1;</i>
                    <div class="name">单选框选中</div>
                    <div class="code">&amp;#xe6f1;</div>
                    <div class="fontclass">.danxuankuangxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f0;</i>
                    <div class="name">单选框</div>
                    <div class="code">&amp;#xe6f0;</div>
                    <div class="fontclass">.danxuankuang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f2;</i>
                    <div class="name">复选框</div>
                    <div class="code">&amp;#xe6f2;</div>
                    <div class="fontclass">.fuxuankuang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f3;</i>
                    <div class="name">复选框选中</div>
                    <div class="code">&amp;#xe6f3;</div>
                    <div class="fontclass">.fuxuankuangxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ff;</i>
                    <div class="name">添加</div>
                    <div class="code">&amp;#xe6ff;</div>
                    <div class="fontclass">.tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe700;</i>
                    <div class="name">添加2</div>
                    <div class="code">&amp;#xe700;</div>
                    <div class="fontclass">.tianjia2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f8;</i>
                    <div class="name">确认</div>
                    <div class="code">&amp;#xe6f8;</div>
                    <div class="fontclass">.queren</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f9;</i>
                    <div class="name">确认2</div>
                    <div class="code">&amp;#xe6f9;</div>
                    <div class="fontclass">.queren2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6fa;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xe6fa;</div>
                    <div class="fontclass">.shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6fb;</i>
                    <div class="name">删除2</div>
                    <div class="code">&amp;#xe6fb;</div>
                    <div class="fontclass">.shanchu2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe706;</i>
                    <div class="name">个人</div>
                    <div class="code">&amp;#xe706;</div>
                    <div class="fontclass">.geren</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe720;</i>
                    <div class="name">类目</div>
                    <div class="code">&amp;#xe720;</div>
                    <div class="fontclass">.leimu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe721;</i>
                    <div class="name">类目2</div>
                    <div class="code">&amp;#xe721;</div>
                    <div class="fontclass">.leimu2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe759;</i>
                    <div class="name">柱形图</div>
                    <div class="code">&amp;#xe759;</div>
                    <div class="fontclass">.zhuxingtu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe732;</i>
                    <div class="name">垃圾桶</div>
                    <div class="code">&amp;#xe732;</div>
                    <div class="fontclass">.lajitong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe733;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xe733;</div>
                    <div class="fontclass">.biaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe734;</i>
                    <div class="name">标签2</div>
                    <div class="code">&amp;#xe734;</div>
                    <div class="fontclass">.biaoqian2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe751;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xe751;</div>
                    <div class="fontclass">.shezhi</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
